<template>
  <div>
    <el-row :gutter="20" class="cadres-list-box">
      <el-col :span="4">
        <ul class="mangage-list">
          <li>JY员管理</li>
          <li>SM网人员管理</li>
          <li>MD专管员</li>
        </ul>
      </el-col>
      <el-col :span="20">

        <div class="steps-box">
          <div></div>
          <div></div>
          <div></div>
        </div>

        <el-tabs type="card" v-model="cadresActive" @tab-click="tabChange">
          <el-tab-pane name="0" label="待上报"></el-tab-pane>
          <el-tab-pane name="1" label="审批中"></el-tab-pane>
          <el-tab-pane name="2" label="待培训"></el-tab-pane>
          <el-tab-pane name="3" label="在岗"></el-tab-pane>
          <el-tab-pane name="4" label="年度政审"></el-tab-pane>
          <el-tab-pane name="5" label="待转岗"></el-tab-pane>
          <el-tab-pane name="6" label="转岗审批"></el-tab-pane>
          <el-tab-pane name="7" label="离岗审批"></el-tab-pane>
          <el-tab-pane name="8" label="脱密期"></el-tab-pane>
        </el-tabs>

        <div class="title-bar">
          <div class="title-t">JY干部管理</div>
          <div class="btn-box">
            <el-button type="primary" @click="addUser" v-if="cadresActive === '0'">新增</el-button>
            <el-button @click="personalExport">导出</el-button>
            <el-button @click="personalPolitical" v-if="cadresActive === '3'">刷新</el-button>
            <el-input style="width: 200px;" v-model="searchValue" clearable></el-input>
            <el-button type="primary" @click="personalList">查询</el-button>
          </div>
        </div>

        <el-table :data="cadresList" :key="cadresActive">
          <el-table-column label="姓名" prop="personalName" width="100" fixed></el-table-column>
          <el-table-column label="所属单位" prop="szPersonalRecord.unitName" v-if="cadresActive !== '0'"></el-table-column>
          <el-table-column label="参加工作时间" prop="workYears" v-if="cadresActive === '0'"></el-table-column>
          <el-table-column label="参加机要工作时间" prop="sensitiveWorkYears" width="160"></el-table-column>
          <el-table-column label="现任职务" prop="szPersonalRecord.currentPosition"
            v-if="cadresActive !== '0'"></el-table-column>
          <el-table-column label="岗位名称" prop="szPersonalRecord.jobTitle" v-if="cadresActive !== '0'">
            <template slot-scope="scope">{{ scope.row.szPersonalRecord &&
              getValueContent($store.state.distObj.sz_common_duty, scope.row.szPersonalRecord.jobTitle) }}</template>
          </el-table-column>
          <!-- <el-table-column label="角色" prop="szPersonalRecord.jobTitle"></el-table-column> -->
          <el-table-column label="政治面貌" prop="politicalStatus" v-if="cadresActive === '0'">
            <template slot-scope="scope">
              {{ getValueContent($store.state.distObj.sz_staff_political, scope.row.politicalStatus) }}
            </template>
          </el-table-column>
          <el-table-column label="联系方式" prop="phone"></el-table-column>
          <el-table-column label="操作" width="180" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" @click="goOnDuty(scope.row)" v-if="cadresActive === '0'">继续上岗</el-button>
              <el-button type="text" v-if="cadresActive === '1' || cadresActive === '7'"
                @click="cadresPass(scope.row)">通过</el-button>
              <el-button type="text" v-if="cadresActive === '1' || cadresActive === '7'"
                @click="caderReject(scope.row)">不通过</el-button>
              <el-button type="text" v-if="cadresActive === '3'">离岗申请</el-button>
              <el-button type="text" v-if="cadresActive === '3'">转岗申请</el-button>
              <el-button type="text" v-if="cadresActive === '4'" @click="cadresApprove(scope.row)">政审</el-button>
              <el-button type="text" v-if="cadresActive === '5'">转岗</el-button>
              <el-button type="text" v-if="cadresActive === '6'">审批</el-button>
              <el-button type="text" v-if="cadresActive === '8'">离岗信息</el-button>
              <el-button type="text" @click="goDetails(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="personalList" />
      </el-col>
    </el-row>
    <el-dialog :visible.sync="yearApproveVisible" width="400px" title="政审">
      <div style="text-align: center;">
        <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url"
          :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
          :on-success="(response, file, fileList) => { handleFileSuccess(response, file, fileList, 'leader') }"
          :auto-upload="true">
          请上传政审文件: <el-button size="mini" type="text" icon="el-icon-upload2">上传文件</el-button>
        </el-upload>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="yearApproveVisible = false">取 消</el-button>
        <el-button type="primary" @click="yearApproveSubmit">政审通过</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { personalList, personalPut, personalPolitical } from '@/api/cadre/cadre'
import { getDistContent } from "@/utils/index"
import { getToken } from "@/utils/auth"
const cadreObj = {
  '0': '待上报',
  '1': '审批中',
  '2': '待培训',
  '3': '在岗',
  '4': '年度政审',
  '5': '待转岗',
  '6': '转岗审批',
  '7': '离岗审批',
  '8': '脱密期'
}
export default {
  name: 'cadre-cadres',
  data() {
    return {
      cadresActive: '0',
      searchValue: '',
      cadresList: [],
      yearApproveVisible: false,
      fileList: [],
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/common/upload"
      },
      personalId: '',
      // ----- pages -------
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        politicType: '',
        status: '0' // 审批阶段（待上报0，审批中1，待培训2，在岗中3，待转岗5，转岗审批6，离岗审批7，脱密期8）
      }
      // ----- pages -------
    }
  },
  created() {
    this.cadresActive = this.$route.query.cadresActive || '0'
    this.personalList()
  },
  methods: {
    getValueContent(list, val, prop) {
      return getDistContent(list, val, prop)
    },
    // 新增人员
    addUser() {
      this.$router.push({
        name:'Details',
        query: {
          status: this.queryParams.status,
          isEdit: 'true',
          cadresActive: this.cadresActive
        }
      })
    },
    // 继续上岗
    goOnDuty(row){
      this.$router.push({
        name:'Details',
        query: {
          status: '1',
          isEdit: 'true',
          id: row.personalId,
          cadresActive: this.cadresActive
        }
      })
    },
    personalPolitical() {
      personalPolitical({}).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.personalList()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 查看详情
    goDetails(row) {
      this.$router.push({
        name:'Details',
        query: {
          status: this.cadresActive === '0' ? '0' : '1',
          isEdit: 'false',
          id: row.personalId,
          cadresActive: this.cadresActive
        }
      })
    },
    tabChange(val) {
      // console.log('val:', this.cadresActive)
      this.personalList()
    },
    personalExport() {
      let data = {
        status: this.cadresActive
      }
      if (this.cadresActive > 1 && this.cadresActive < 5) {
        data.status = '3'
      } else {
        data.status = this.cadresActive
      }
      data.searchValue = this.searchValue
      this.download('/sz/personal/export', {
        ...data
      }, `${cadreObj[this.cadresActive]}_${new Date().getTime()}.xlsx`)
    },
    // 获取人员列表
    personalList() {
      let params = { ...this.queryParams }
      if (this.cadresActive > 1 && this.cadresActive < 5) {
        params.status = '3'
      } else {
        params.status = this.cadresActive
      }
      params.searchValue = this.searchValue
      if (this.cadresActive === '4') {
        params.politicType = '0'
      }
      personalList(params).then(res => {
        if (res.code === 200) {
          this.cadresList = res.rows
          this.total = res.total
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    cadresApprove(row) {
      this.yearApproveVisible = true
      if (this.cadresActive === '4') {
        this.personalId = row.personalId
      }
    },
    yearApproveSubmit() {
      this.personalPut(this.personalId, '3', '1')
    },
    cadresPass(row) {
      if (this.cadresActive === '1') {
        this.personalPut(row.personalId, '3', '')
      }
    },
    caderReject(row) {
      if (this.cadresActive === '1') {
        this.personalPut(row.personalId, '0', '')
      }
    },
    // 审批
    personalPut(id, status, politicType) {
      let data = {
        personalId: id, 
        status: status, 
        politicType: politicType
      }
      if (politicType === '1') {
        data.szPersonalFileList = []
        if (this.fileList.length === 0) {
          this.$message.error('请上传审批文件')
          return
        }
        this.fileList.forEach(v => {
          let file = {
            fileName: v.response ? v.response.newFileName : v.fileName,
            fileContent: v.response ? v.response.fileName : v.fileContent,
            fileType: 9
          }
          data.szPersonalFileList.push(file)
        })
      }
      personalPut(data).then(res => {
        if (res.code === 200) {
          this.yearApproveVisible = false
          this.$message.success(res.msg)
          this.personalList()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList, type) {
      this.upload.isUploading = false;
      // 人员文件类型（0:档案材料，1:个人登记表，2:政审表，3:资格认证表，4:上岗申请表，5:责任书，6:其他材料，7:本单位培训资料，8:资格证书，9:年度政审），新增一个年度政审
      if(type === 'leader') {
        this.fileList = [...this.fileList,...fileList]
      }
      this.$message.success('上传成功')
    }
  }
}
</script>
<style lang="scss" scoped>
.cadres-list-box{
  padding-bottom: 20px;
  .title-bar{
    display: flex;
    line-height: 32px;
    margin-bottom: 20px;
    .title-t{
      flex: 1;
    }
    .el-input{
      margin: 0 10px;
    }
  }
  .mangage-list, .mangage-list li{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .mangage-list{
    li{
      font-size: 14px;
      line-height: 24px;
      padding: 8px 8px;
      border-radius: 4px;
      transition: .5s;
      cursor: pointer;
    }
    li:hover{
      background: #fafafa;
    }
  }
  .steps-box{
    display: flex;
    height: 40px;
    div{
      position: relative;
      line-height: 40px;
      width: 300px;
    }
    div::after{
      position: absolute;
      content: '';
      width: 100%;
      top: 50%;
      left: 0;
      height: 2px;
      background: rgba(74, 91, 107, 0.16);
    }
    div::before{
      content: '岗前';
      background: #fff;
      display: inline-block;
      position: relative;
      z-index: 2;
      padding: 0 8px;
    }
    div:nth-child(2){
      width: 400px;
    }
    div:nth-child(2)::before{
      content: '在岗';
    }
    div:nth-child(3){
      flex: 1;
    }
    div:nth-child(3)::before{
      content: '离岗';
    }
  }
}
</style>
<style lang="scss" >
.cadres-list-box{
  .el-tabs{
    .el-tabs__item{
      width: 100px;
      text-align: center;
    }
  }
}
</style>